<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="content_box pd-30" v-if="Object.keys(detail).length > 0">
			<view class="bank-item pd-20">
				<view class="main pd-40" :style="'background-image:url(' + detail.bank_type.bg + ');'">
					<view class="flex" style="align-items: flex-start;">
						<view class="logo-box flex-center mr-20">
							<image class="logo" :src="detail.bank_type.logo" mode="widthFix"></image>
						</view>
						<view class="r">
							<view class="ft-28 c-ff fw-800">{{ detail.bank_type.name }}</view>
							<view class="mt-40 ft-28 c-ff fw-800">{{ '**** **** **** ' + detail.bank_num.substring(-4,
								4) }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="info-item flex-bwt mt-20 pd-20">
				<view class="ft fw-800">持卡人</view>
				<view class="ft-24 c-66">{{ detail.name }}</view>
			</view>
			<view class="info-item flex-bwt mt-20 pd-20">
				<view class="ft fw-800">银行卡号</view>
				<view class="ft-24 c-66">{{ detail.bank_num }}</view>
			</view>
			<view class="info-item flex-bwt mt-20 pd-20">
				<view class="ft fw-800">开户行</view>
				<view class="ft-24 c-66">{{ detail.bank_type.name }}</view>
			</view>
			<view class="info-item flex-bwt mt-20 pd-20">
				<view class="ft fw-800">开户支行</view>
				<view class="ft-24 c-66">{{ detail.bank_branch }}</view>
			</view>
		</view>
		<!-- 占位 -->
		<view style="height: 166rpx;"></view>
		<view class="bottom">
			<view class="btn mr-20" @click="changeBank">
				删除
			</view>
			<view class="btn active" @click="goPage('/subpackage/bank/editBank?id=' + detail.id)">
				编辑
			</view>
		</view>
	</view>
	<dialogPop ref="diaLogPop" title="删除银行卡" content="确定要删除银行卡吗？" :show="show" @confirm='confirm' @cancel='close'>
	</dialogPop>
</template>

<script setup lang="js">
import {
	ref,
	reactive
} from 'vue';
import dialogPop from '@/components/dialogPop.vue';
import navHead from '@/components/navHead.vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onShow,
	onLoad
} from "@dcloudio/uni-app";
const show = ref(false)
const headData = reactive({
	color: '#fff',
	title: '查看银行卡'
})

const copyAddress = () => { }
// 弹窗取消时处理逻辑
const close = () => {
	show.value = !show.value

}
// 弹窗删除提交
const confirm = () => {
	close()

	utils
		.request(
			api.deleteBank, {
			id: id.value
		},
			"post"
		)
		.then((res) => {
			getApp().globalData.shouldRefresh = true;
			uni.navigateBack()
		});
}
// 打开弹窗
// const diaLogPop = ref('diaLogPop')
const changeBank = () => {
	console.log('show.value', show.value)
	// diaLogPop.value.open()
	show.value = !show.value
}

// 页面显示时检测刷新标记
onShow(() => {
	const app = getApp();
	if (app.globalData.shouldRefresh) {
		reloadData()
		app.globalData.shouldRefresh = false;
	}
})

const reloadData = () => {
	utils
		.request(
			api.editBank, {
			id: id.value
		},
			"post"
		)
		.then((res) => {
			detail.value = res.data.info
		});
}

const id = ref('')
const detail = ref({})
onLoad((option) => {
	id.value = option?.id || ''
	if (id.value) {
		reloadData()
	}
})

// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}
</script>

<style lang="scss" scoped>
.bank-item {
	width: 690rpx;
	background: #F8F8F8;
	border-radius: 40rpx;

	.main {
		width: 650rpx;
		height: 212rpx;
		background: #B81C22;
		border-radius: 40rpx;
		background-size: 100% 100%;

		.logo-box {
			width: 64rpx;
			height: 64rpx;
			background: #F8F8F8;
			border-radius: 50%;

			.logo {
				width: 44rpx;
				height: 44rpx;
				flex-shrink: 0;
			}
		}
	}
}

.info-item {
	width: 690rpx;
	background: #F8F8F8;
	border-radius: 20rpx;
}

.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 140rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: #F8F8F8;
	padding: 0 40rpx;
	box-sizing: border-box;

	.btn {
		height: 78rpx;
		width: 196rpx;
		line-height: 78rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.active {
		width: 454rpx;
		background-color: #333;
		color: #fff;
	}
}
</style>